<template>
  <a-modal
    :width="600"
    :dialogStyle="{ padding: '17px 24px' }"
    title="忘记密码"
    :footer="false"
    v-model:open="forgetFormVisible"
  >
    <div class="forget-form">
      <a-form
        ref="forgetFormRef"
        :label-width="0"
        :data="forgetForm"
        :rules="forgetRules"
      >
        <a-form-item class="form-item" name="name">
          <a-input
            style="height: 60px"
            v-model="forgetForm.name"
            clearable
            placeholder="请输入您的姓名"
          >
          </a-input>
        </a-form-item>
        <a-form-item class="form-item" name="username">
          <a-input
            style="height: 60px"
            placeholder="请输入您的账号"
            v-model="forgetForm.username"
          >
          </a-input>
        </a-form-item>
        <a-button theme="primary" class="form-btn" @click="onForgetSubmit"
          >下一步</a-button
        >
      </a-form>
    </div>
  </a-modal>
</template>
<script setup>
import { ref } from "vue";

const forgetFormVisible = ref(false);
const forgetForm = ref({
  name: "",
  username: "",
});
const forgetRules = ref({
  name: [
    { required: true, message: "请输入姓名" },
    { min: 2, max: 12, message: "长度在 2 到 12 个字符" },
  ],
  username: [{ required: true, message: "请输入用户名" }],
});
const forgetFormRef = ref(null);
const onForgetSubmit = () => {
   forgetFormRef.value
    .validate()
    .then(() => {
      if (agree.value) {
        console.log("values", forgetForm.value);
      } else {
        message.error("请先同意用户协议");
      }
    })
    .catch((error) => {
      console.log("error", error);
    });
};
</script>
